<template>
<div class="">
   <div class="news_list">
      <div class="header">
        <div class="title ocolor" >成功案例</div>
        <!-- <div class="more" @click="moreNews()">更多 ></div> -->
      </div>
       <div style="margin-left:.5rem">
    <swiper class="swiper" :options="swiperOption">
            <swiper-slide   v-for="(item,index) in caseList" :key="index">
                <div class="article" @click="detail(item.id)">
                    <div class="article__cover">
                        <img :src="getImgUrl(item.thumb)" alt="">
                    </div>
                    <p class="article__title">{{item.title}}</p>
                    <footer>
                        <div class="profession" v-html="item.profession"></div>
                    </footer>
                </div>
            </swiper-slide>
  </swiper>
       </div>
  </div>
</div>

</template>

<script>
    import {formatDate} from '../../../../config/formatDate.js'
 import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/swiper-bundle.css'
export default {
     props:{
         caseList:Array
     },
  components: {
      Swiper,
      SwiperSlide
    },
    filters: {

        //方法一: yyyy-MM-dd hh:mm
        formatDate(time) {
            time = time * 1000
            let date = new Date(time)
            return formatDate(date, 'yyyy-MM-dd hh:mm')
        }
    },
  data() {
      return {
        swiperOption: {
          slidesPerView: 2,
          slidesPerColumn: 2,
          spaceBetween: 1,
          freeMode: true,
        }
      }
    },
    methods:{
        moreNews(){
            this.$router.push({path:'/liuxue_news'})
        },
        
        detail(id){
            this.$router.push({path:'/caseDetail',query:{id:id}})
        }
    }
}
</script>

<style lang="less" scoped>
.container{

  .header{
      padding: 1.3rem 1rem 1.3rem 0;
      display: flex;
         .title{
             flex: 1;
             padding-left: 1rem;
        color: rgb(0, 164, 255);
        font-size: 0.9rem;
        line-height: 0.9rem;
        font-weight: bold;
        text-align: center;
    }
  }
    .article{

    margin-right: 24px;
    height: 11.375rem;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(235, 235, 235);
}
.article__cover {
    height: 10.625rem;
    border-radius: 0.25rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.article__title{
    font-size: 0.7rem;
    height: 1.05rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow-wrap: break-word;
    word-break: break-all;
    text-align: justify;
    margin-top: 0.5rem ;
    margin-bottom: 0rem ;
    overflow: hidden;
}
footer{
    font-size: 0.5rem;
    line-height: 0.5rem;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    .article__tag{
        background-color: rgb(239, 249, 255);
        color: rgb(38, 171, 255);
        line-height: 1;
        border-radius: 0.2rem;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(0, 164, 255);
        border-image: initial;
        padding: 0.175rem 0.275rem;
    }
    .article__postTime {
        color: rgb(163, 163, 163);
        display: flex;
        -webkit-box-align: center;
        align-items: center;
    }


}
.news_list{
    .swiper {
    height: 26rem;
    margin-left: auto;
    margin-right: auto;

    .swiper-slide {
      height: 12.5rem;
    }

}
}

}

.profession /deep/ p{
            line-height: .81rem!important;
        }

</style>
